<template>
  <div >
    <!--1-1最上面一栏显示我的-->
    <div class="user-mine">
      我的
    </div>
    <!--1-2显示用户名，头像和一个icon图标-->
    <div class="user-header" :style="{backgroundImage: `url(${background_image})`}">
      <!--放置图片-->
      <a class="user-header-left">
        <img :src="avatar" @click="toLogin" alt="头像" class="user-image">

      </a>
      <!--右边的用户名和组件-->
      <div class="user-header-right">
        <!--用户名-->
<!--        <div class="user-name">-->
          <span class="user-name">{{nick_name}}</span>
          <span ><van-icon name="bell" class="user_set" @click="toSetting" /></span>
<!--        </div>-->
        <!--组件-->
<!--        <div class="user-icon">-->
<!--          <van-icon name="bell" class="user_set" @click="toSetting" />-->
<!--        </div>-->
      </div>

    </div>
<!--    <div class="user_header" :style="{backgroundImage: `url(${background_image})`}">-->
<!--      <van-icon name="setting" class="user_set" @click="toSetting" />-->
<!--        <div class="user_avatar">-->
<!--          <span>-->
<!--            <img :src="avatar" @click="toLogin" alt="头像" width="55" height="55">-->
<!--          </span>-->
<!--          <span class="user_name">-->
<!--            {{nick_name}}-->
<!--          </span>-->
<!--    </div>-->

<!--    </div>-->
  </div>
</template>

<script>
import avatarDefault from '../../assets/images/avatar_default.png'
import bgDefault from '../../assets/images/user_head_bg.png'
import { getLocalStorage } from '../../common/utils/local-storage'
import { Icon } from 'vant'

export default {
  name: 'setting-header',
  components: {
    [Icon.name]: Icon
  },
  data () {
    return {
      isLogin: false,
      nick_name: '昵称',
      avatar: avatarDefault,
      background_image: bgDefault
    }
  },

  mounted () {
    this.getUserInfo()
  },

  methods: {
    getUserInfo () {
      const infoData = getLocalStorage(
        'username',
        'wechat_nick_name',
        'wechat_avatar',
        'token'
      )
      console.log(infoData)
      this.nick_name = infoData.wechat_nick_name || infoData.username || '昵称'
      this.avatar = infoData.wechat_avatar || avatarDefault
      if (infoData.token !== null) {
        this.isLogin = true
      }
    },
    toSetting () {
      this.$router.push({ name: 'account' })
    },
    toLogin () {
      !this.isLogin &&
        this.$router.push({ name: 'login', query: { redirect: 'setting' } })
    }
  }
}
</script>

<style lang="less" scoped>
  /*我的*/
  .user-mine{
    position: relative;
    text-align: center;
    width: 100%;
    /*height: 40px;*/
    font-size: large;
    padding-top: 10px;
    font-weight: 600;
    /*border-bottom:1px solid #666;//画一条分界线*/
  }
  /*我的*/
  .user-header{
    margin-top: 10px;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    /*color: #fff;*/
    height: 6em;
    /*border-bottom:1px solid #666;//画一条分界线*/
    }
  /*左边放图片*/
  .user-header-left{
    position: relative;
    width: 100px;
  }
  /*右边用户名和icon*/
  .user-header-right{
    position: relative;
    flex: 1;
  }
    /*.user_header {*/
  /*   position: relative;*/
  /*   background-repeat: no-repeat;*/
  /*   background-size: cover;*/
  /*   height: 10em;*/
  /*   box-sizing: border-box;*/
  /*   !*text-align: center;*!*/
  /*   color: #fff;*/
  /*   padding-top: 30px;*/
  /* }*/
  /*图片*/
  .user-image{
    width:55px;
    height:55px;
    margin-left: 20px;
    border-radius:50%;
    padding-top: 18px;
  }
  /*用户名*/
  .user-name{
    line-height: 6rem;//距离上面的高度！！！
    position: relative;
  }
  /*用户名隔壁的设置组件*/
  /*.user-icon{*/
  /*  float: right;*/
  /*  !*color: white;*!*/
  /*}*/
  i.user_set {
    line-height: 4rem;
    /*position: absolute;*/
    float: right;
    top: 10px;
    right: 10px;
    font-size: 24px;
  }
  .user_avatar {
    margin-bottom: 10px;
    img {
      border: 0;
      border-radius: 50%;
    }
  }
</style>
